<style scoped>
  .el-form-item{
    margin-bottom: 1px;
  }
  .el-card__body {
    padding-top: 0 !important;
  }

  .bg-red {
    background-color: red;
  }

  .bg-green {
    background-color: green;
  }

  .bg-orange {
    background-color: orange;
  }
  a{
    color: dodgerblue;
  }
  a:link {color: red} /* 未访问的链接 */
  a:visited {color: red}	/* 已访问的链接 */
  a:hover {color: black}	/* 鼠标移动到链接上 */
  a:active {color: yellow}	/* 选定的链接，即鼠标按下去的时候不松开显示的状态 */
</style>
<template>
  <div id="onescan-page" v-loading="loading">
    <div class="app-container calendar-list-container" style="padding-bottom: 0px">
      <div class="filter-container">
        <el-form inline>
          <el-form-item label="请选择门站">
            <el-select class="filter-item" v-model="queryParams.groupId" placeholder="请选择" @change="selectGroupChange">
              <el-option v-for="item in  groups" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item label="请选择刷新频率">-->
            <!--<el-radio-group v-model="delayTime" size="large" @change="delayTimeChange">-->
              <!--<el-radio-button :label="val" v-for="(key,val) in delayTimes" :key="val">{{key}}</el-radio-button>-->
            <!--</el-radio-group>-->
          <!--</el-form-item>-->
        </el-form>
      </div>
    </div>

    <el-row :gutter="20" style="margin-top:5px;padding: 15px;" v-if="1">
      <!--// role === 'ROLE_ADMIN'-->
      <el-col :span="6" v-for="(item,index) in list" :key="item.name">
        <el-card class="box-card" :class="colors[item.status]" :body-style="{'padding-top': '0'}">
          <div slot="header" class="clearfix">
            <span>流量表sn: {{item.id}}</span>
          </div>
          <div style="padding-top: 0px">
            <p v-for="(val, key) in item" v-if="oneScanShowdatas[key]">
             <span><pre style="display: inline;"> {{oneScanShowdatas[key]}}:</pre></span> &nbsp;&nbsp;{{zeroVals(key,val)}}{{oneScanShowUnits[key]}}
            </p>
          </div>
          <div style="padding-top: 0px">
            <a  @click="pushToHistory(item.id)">历史记录</a>
          </div>

        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-pagination background @current-change="handleCurrentChange"
                     :current-page.sync="queryParams.pageNumber"
                     :page-size="queryParams.pageSize"
                     layout="prev, pager, next"
                     :total="total">
      </el-pagination>
    </el-row>
    <!--<el-row :gutter="20" style="margin-top:50px;" v-else-if="role === 'ROLE_USER'">-->
    <!--<el-col :span="6" v-for="(item,index) in deviceList" :key="index">-->
    <!--<el-card class="box-card" :class="colors[item.status]">-->
    <!--<div slot="header" class="clearfix">-->
    <!--<span>{{item.name}}</span>-->
    <!--</div>-->
    <!--<div style="height:100px;">-->
    <!--<span>流量：{{item.version}}</span>-->
    <!--<span></span>-->

    <!--</div>-->
    <!--</el-card>-->
    <!--</el-col>-->
    <!--</el-row>-->
  </div>
</template>

<script>
  import { fetchList } from '../../api/group'
  import { getScanList } from '../../api/device'
  import { getLoginUser } from '../../utils/auth'
  import { headerData, deviceKeyVal, oneScanShowdatas, zeroVals, oneScanShowUnits } from '../device/communicate/HeaderData'

  export default {
    data() {
      return {
        time: null,
        delayTime: 10000,
        delayTimes: {
          10000: '10秒',
          30000: '半分钟',
          60000: '一分钟'
        },
        loading: false,
        role: '',
        oneScanShowdatas,
        oneScanShowUnits,
        groups: [],
        queryParams: {
          groupId: '',
          pageNumber: 1,
          pageSize: 10
        },
        total: 0,
        deviceKeyVal,
        headerData,
        start: false,
        colors: {
          0: 'bg-green',
          1: 'bg-orange',
          2: 'bg-red'
        },
        isLast: false,
        list: [],
        deviceList: []
      }
    },
    mounted() {
      // this.$refs.scroll.addEventListener('scroll', () =>{
      //   console.log('ssssssss')
      // })
    },
    created() {
      this.role = getLoginUser().authorities[0]
      this.getGroups()
    },
    methods: {
      zeroVals,
      pushToHistory(sn) {
        this.$router.push({ path: '/device/history', query: { sn: sn.replace(/\0/g, '') }})
      },
      delayTimeChange(val) {
        this.delayTime = val
        this.stopTime()
        this.startTime()
      },
      restartTime() {
        this.stopTime()
        this.startTime()
      },
      stopTime() {
        if (this.time) {
          clearInterval(this.time)
        }
      },
      startTime() {
        this.time = setInterval(this.getDevices, this.delayTime)
      },
      handleCurrentChange(page) {
        this.queryParams.pageNumber = page
        this.getDevices()
      },
      scroll() {
        console.log('ssssssss')
      },
      selectGroupChange(groupId) {
        this.queryParams.groupId = groupId
        this.restartTime()
        this.getDevices()
      },
      getDevices() {
        this.loading = true
        getScanList(this.queryParams).then(data => {
          this.loading = false
          if (data.data && data.data.content) {
            this.list = data.data.content
            this.total = data.data.totalElements
            this.isLast = data.data.last
          } else {
            this.total = 0
            this.list = []
            this.$message.info('尚无数据')
            this.isLast = false
          }
        })
      },
      getGroups() {
        fetchList().then(data => {
          if (data.data.length === 0) {
            this.$message.error('请先新建门站！')
            return
          }
          this.groups = data.data
          this.queryParams.groupId = this.groups[0].id || ''
          this.getDevices()
          this.startTime()
        })
      },
      getList() {
        fetchList().then(data => {
        })
      },
      onCancel() {
        this.$message({
          message: 'cancel!',
          type: 'warning'
        })
      }
    }
  }
</script>


